<!doctype html>
<html lang="{{ config('app.locale') }}">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, max-scale=1, min-scale=1,user-scalable=no">
  <meta name="_token" content="{{ csrf_token() }}"/>

  <link href="{{env('CDN_RESOURCE')}}/css/mobile/campaign/redeemCard/mobile.css?v={{config('app.version')}}" rel="stylesheet"
        type="text/css">
  <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css">

  <title>Qkids久趣英语</title>

</head>
<body>
<div class="container">

  <div class="s-header">
    <div class="logo"></div>
  </div>

  <div class="blue-bg">
    <div class="cover">
      <div class="b">严选北美外教</div>
      <div class="m">在线授课</div>
      <div class="s">
        4-12岁适用
      </div>

      <div style="position: relative; line-height: 0;">
        <img src="{{env('CDN_RESOURCE')}}/img/mobile/campaign/redeemCard/family.jpg">
        <div class="play-icon" id="playVideo"></div>
      </div>

    </div>
    <div class="white-padding"></div>
  </div>

  <div class="wrapper">

    <div class="section" style="padding-top: 24px;padding-bottom: 0;">

      <div style="line-height: 0;">
        <span class="welcome-qkids">欢迎您！Qkids久趣英语优学派专属课时兑换！</span>
      </div>

      <div class="input-redeem" style="position: relative;margin-left: -15px;">
        <span class="input-title">卡号：</span>
        <input id="redeem" type="text"/><br/>
        <br/>
        <span class="input-title">密码：</span>
        <input id="redeem-code" type="text"/><br/>
        <span id="code-err" class="code-err"></span>
      </div>

      <div id="submit" class="reg-btn apply-btn">
        确认
      </div>
    </div>
    <div class="section" style="padding-top: 32px;padding-bottom: 0;">
      <div class="header">温馨提示</div>
      <div class="instruction">
        <div>登录久趣账号，输入兑换码，点击“确认”，账号自动获取相应课时；</div>
        <div>每个账号仅能兑换1次，自兑换日起3个月内有效；</div>
        <div>在微信公众号点击右下角“服务咨询”-“新手指南”可了解如何上课；</div>
        <div>有任何需求均可在微信公众号“久趣英语服务号”咨询。</div>
      </div>
    </div>

    <div class="section">
      <div class="graduation-icon-c"></div>
      <div class="header">严选北美外教</div>
      <img src="{{env('CDN_RESOURCE')}}/img/mobile/teacher.png">
      <div class="statistic">
        <div class="item">
          <div class="up">1%</div>
          <div class="down">考核通过率</div>
        </div>

        <div class="item">
          <div class="up">100%</div>
          <div class="down">来自美国，加拿大</div>
        </div>

        <div class="item">
          <div class="up">95+</div>
          <div class="down">家长评分</div>
        </div>

      </div>
    </div>
    <div class="section">
      <div class="interest-icon-c"></div>
      <div class="header">趣味教学场景</div>
      <div class="sub-header">孩子到久趣的第一个转变—主动要求上课</div>
      <img src='{{env('CDN_RESOURCE')}}/img/mobile/teaching.png'>

      <div class="lesson-steps">
        <div class="item">
          <div class="photo-icon"></div>
          <div class="text">丰富动画</div>
        </div>


        <div class="item">
          <div class="game-icon"></div>
          <div class="text">游戏化</div>
        </div>


        <div class="item">
          <div class="thumbsup-icon"></div>
          <div class="text">同伴激励</div>
        </div>


      </div>
    </div>
    <div class="section">
      <div class="level-icon-c"></div>
      <div class="header">科学分级课程体系</div>
      <div class="sub-header">
        <span>基于欧洲语言共同框架(CEFR)独家研发，与中国公立小学新课标教材接轨，更适合中国孩子学习</span>
      </div>
      <img src="{{env('CDN_RESOURCE')}}/img/mobile/course_system.png" style="margin-top: 22px;">
      <div class="sub-header">
        <span>即刻连线北美外教，专业指导，进阶升级。</span>
        <span>久趣英语目前已开设自然拼读课、语言基础课，还有更多好学好玩的课程等你发现。</span>
      </div>
    </div>

    <div class="section ">
      <div class="blue-divider"></div>
      <div class="header">特惠价格，即刻报名</div>
      <div class="sub-header">180天无条件退款，报名后即可上课</div>

      <div class="lesson-plan">

        <div class="detail product4 zoom-out">

          <div class="fee">
                        <span class="up">
                            ¥ <span class="money">100</span>
                        </span>
            <span class="down">
                            /4 课时
                        </span>
          </div>

          <div class="schedule">
            <div><span>自购买起，一个月内有效</span></div>
            <div><span>建议4-6节课/周</span></div>
            <div><span>本期招生仅限前500</span></div>
            <div class="reg-btn buy-btn" data-field="4">购买</div>
          </div>

        </div>

        <div class=" detail zoom-in">

          <div class="fee">
                        <span class="up">
                            ¥ <span class="money">3500</span>
                        </span>
            <span class="down">
                            /100 课时
                        </span>
          </div>

          <div class="schedule">
            <div><span>自购买起，课时一年内有效</span></div>
            <div><span>建议4-6节课/周</span></div>
            @if($largeLimit['day'] > 0)
              <div class="reg-btn buy-btn disable" data-field="6">待开放</div>
            @else
              <div class="reg-btn buy-btn" data-field="6">购买</div>
            @endif
          </div>

        </div>

        <div class=" detail zoom-out">

          <div class="fee">
                        <span class="up">
                            ¥ <span class="money">1750</span>
                        </span>
            <span class="down">
                            /50 课时
                        </span>
          </div>

          <div class="schedule">
            <div><span>自购买起，课时90天内有效</span></div>
            <div><span>建议4-6节课/周</span></div>
            @if($largeLimit['day'] > 0)
              <div class="reg-btn buy-btn disable" data-field="5">待开放</div>
            @else
              <div class="reg-btn buy-btn" data-field="5">购买</div>
            @endif
          </div>

        </div>

      </div>
    </div>

    <div class="section">

      <div class="blue-divider"></div>
      <div class="header">简单<span>3</span>步，立即上课</div>

      <div class="lesson-steps" style="margin-top:10px;">
        <div class="item">
          <div class="ok-icon"></div>
          <span>购买课程</span>
        </div>

        <div class="item">
          <div class="chat-icon"></div>
          <span>微信约课</span>
        </div>

        <div class="item">
          <div class="tv-icon"></div>
          <span>进入教室</span>
        </div>
      </div>

      <div class="class-type">
        <div class="c-header">精品4、6人班，每节课30分钟</div>
        <div class="type">
          <div>
            <span>6</span>人班&nbsp<span>1</span>课时/节
          </div>

          <div><span>4</span>人班&nbsp<span>1.5</span>课时/节</div>

        </div>
      </div>
    </div>
    <div class="section">
      <div class="blue-divider"></div>
      <div class="header">家长说</div>
      <div class="review" id="review">
        <div class="left-r item ">
          <img src="{{env('CDN_RESOURCE')}}/img/mobile/avatar1.png"/>
          <div class="text">喜欢久趣，我们家一天一节课，孩子主动要求的。</div>

          <div class="review-who">
            <span>Mike 的家长</span>
          </div>
        </div>

        <div class="right-r item ">

          <div class="text">全程课小孩自己上完了，完全没让我帮忙。</div>
          <img src="{{env('CDN_RESOURCE')}}/img/mobile/avatar2.png"/>

          <div class="review-who">
            <span>Lorna 的家长</span>
          </div>
        </div>

        <div class="left-r item ">
          <img src="{{env('CDN_RESOURCE')}}/img/mobile/avatar3.png"/>
          <div class="text">现在上课已经成为了小朋友期盼的一件事，真不错！</div>

          <div class="review-who">
            <span>Steve 的家长</span>
          </div>
        </div>

        <div class="right-r item ">

          <div class="text">外教的语音语调都很好听，很地道。</div>
          <img src="{{env('CDN_RESOURCE')}}/img/mobile/avatar4.png"/>

          <div class="review-who">
            <span>Vincent 的家长</span>
          </div>
        </div>

        <div class="left-r item ">
          <img src="{{env('CDN_RESOURCE')}}/img/mobile/avatar5.png"/>
          <div class="text">孩子对语言很敏感，我希望他从小就接触纯正的表达。</div>

          <div class="review-who">
            <span>Alina 的家长</span>
          </div>
        </div>

      </div>

    </div>
  </div>

  <div class="group-status" id="groupStatus">
    <div class="explanation">

      <div class="top-banner">
        <img class="monkey sad-monkey"
             src="{{env('CDN_RESOURCE')}}/img/mobile/campaign/doubleEleven/sad_monkey.png">
        <img class="monkey happy-monkey"
             src="{{env('CDN_RESOURCE')}}/img/mobile/campaign/doubleEleven/happy_monkey.png">
        <img class="monkey normal-monkey"
             src="{{env('CDN_RESOURCE')}}/img/mobile/campaign/doubleEleven/normal_monkey.png">
        <img class="left" src="{{env('CDN_RESOURCE')}}/img/mobile/campaign/doubleEleven/b_left.png">
        <img class="right" src="{{env('CDN_RESOURCE')}}/img/mobile/campaign/doubleEleven/b_right.png">
      </div>

      <div class="group-detail">
        <div class="title"></div>
        <div class="text"></div>
      </div>
      <div class="left-btn white-btn" id="leaveBtn">留在本页</div>
      <div class="right-btn blue-btn" id="go">如何上课</div>
    </div>
  </div>

  {{--@include('mobile.partial.loginAndRegister')--}}

  <div class="footer">

    <div class="icon-links">
      <div class="logo-blue"></div>
    </div>

    <div class="email">
      <div class="header">企业邮箱</div>
      <div class="text">service@qkids.cn</div>
    </div>

    <div class="qr-code">
      <img src="{{env('CDN_RESOURCE')}}/img/mobile/qrcode.png"/>
      <span>亲爱的家长，如有任何需要，您都可在微信公众号发消息咨询。</span>
      <span>客服工作时间 (每天 9:00-21:00)</span>
    </div>

    <div class="copy-right">
      <span>Copyright @2017-2018 Qkids All Rights Reserved</span>
      <span>闽ICP备12021838号-3</span>
    </div>

  </div>

  <div class="buy-restrict">
    <div class="info">
      您已经购买过 ¥100／4课时，建议您购买长期课时
    </div>

    <a href="/wx/vip">
      <div class="small-btn confirm-btn">前往购买</div>
    </a>

  </div>

</div>

<div class="redeem-success" style="display: none;width: 100%;">
  <img style="width: 100%;" src="{{env('CDN_RESOURCE')}}/css/mobile/campaign/redeemCard/redeem-success.jpg">
</div>

<!--引入微信js-SDK-->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/mobile/wx_config.js?v={{config('app.version')}}"></script>
<script type="text/javascript" src="https://static-app.97kid.com/wx/js/zepto.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.2/weui.min.js"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/mobile/Zepto_fx_methods.js"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/mobile/login.js?v={{config('app.version')}}"></script>
<script type="text/javascript">

  ;(function ($) {

    $(function () {
      {
        window.account = new Account()
        account.forceLogin = true
        account.getUserInfo(function (err, user) {
          if (!err) {
            if (!user.isNewUser) {
              utils.alert({
                message: '您已经购买过体验课了不具备兑换资格',
                yesText: '购买其他课程',
                yes: function () {
                  window.location.href = window.location.protocol + '//' + window.location.host + '/wx/vip'
                }
              })
              return
            }
            account.ajax({
              type: 'GET',
              path: '/s/yxp/check',
              success: function (data) {
                console.log('已绑定优学派设备')
              },
              error: function (err) {
                utils.alert({
                  message: '您尚未绑定优学派设备不具备兑换资格',
                  yesText: '去购买',
                  yes: function () {
                    window.location.href = window.location.protocol + '//' + window.location.host + '/wx/'
                  }
                })
                console.log('未绑定优学派设备')
                console.error(err)
              }
            })
          }
        })

        $('#submit').click(function () {
          var redeem = $('#redeem').val()
          var code = $('#redeem-code').val()
          if (redeem && code) {
            account.ajax({
              type: 'POST',
              path: '/s/yxp/redeem/exchange',
              data: {
                redeem: redeem,
                code: code
              },
              success: function () {
                $('.container').hide()
                $('.redeem-success').show()
                $('#redeem-code').css('border-color', '')
                $('#code-err').css('display', 'none')
              },
              error: function (err) {
                if (err.code === 'promotion.gift.exist') $('#code-err').text('该用户已兑换过')
                else $('#code-err').text(err.message)
                $('#redeem-code').css('border-color', '#FF4876')
                $('#code-err').css('display', 'inline-block')
              }
            })
          } else {
            $.toastAlert('请输入兑换码', 1)
          }
        })
      }

      {
        var totalPlans = 3
        var clickItem = null
        $('.lesson-plan .detail').on('click', function () {
          $(this).addClass('zoom-in').removeClass('zoom-out')
          $(this).siblings('div').each(function () {
            if ($(this).hasClass('zoom-in')) {
              $(this).removeClass('zoom-in').addClass('zoom-out')
            }
          })

          if ($(this).index() === (totalPlans - 1)) {
            clickItem = $('.lesson-plan .detail').eq(0)
            $('.lesson-plan .detail').eq(0).remove()
            $('.lesson-plan').append(clickItem)
          }

          if ($(this).index() === 0) {
            clickItem = $('.lesson-plan .detail').eq(totalPlans - 1)
            $('.lesson-plan .detail').eq(totalPlans - 1).remove()
            $('.lesson-plan').prepend(clickItem)
          }
        })
      }

      {
        var products = {
          1: 100,
          2: 1750,
          3: 3500,
          4: 5000,
        }
        //提交订单
        $('.buy-btn').off('click').on('click', function () {
          submitMainOrder($(this).attr('data-field'))
        })
        $('.disable').off('click')

        function submitMainOrder (pId) {
          account.forceLogin = true
          //提交订单久趣后台
          account.getUserInfo(function (userInfoError, userInforesult) {

            if (userInfoError) {
              $.toastAlert(userInfoError.message)
            } else {
              if (isInWechat) {
                //配置微信分享接口
                wxconfig.activeShare(userInforesult.shareFlag)
              }
              account.ajax({
                type: 'POST',
                path: '/s/cashBilling/bills',
                data: {
                  cashAmount: products[pId],
                  productType: 0,
                  socialType: 'wx-jqfx',
                  productId: pId,
                  payChannel: isInWechat ? 'weixin' : 'alipay',
                  returnUrl: window.location.protocol + '//' + window.location.host + '/wx/verifypayment/' + pId,
                  tradeType: 'JSAPI',
                  openId: window.localStorage.getItem(account.openId)
                },
                success: function (data) {
                  //唤起微信支付
                  if (data.status !== 'error') {
                    if (isInWechat) {
                      wxconfig.pay(data.bill_id, pId, JSON.parse(data.jsApiParameters), campUrl)
                    } else {
                      window.location.href = data.url
                    }
                  } else {
                    $.toastAlert('下单失败，请重试')
                  }
                },
                error: function (err) {
                  if (pId == 1 && err.code === 'recharge.level.not.applicable.to.user') {
                    $('.buy-restrict').fadeIn()
                  } else {
                    $.toastAlert(err.message, 2)
                  }
                }
              })

            }

          })
        }
      }

      {
        var timeout
        $(document).bind('scroll', function () {

          clearTimeout(timeout)
          timeout = setTimeout(function () {

            var reviewList = $('#review')
            if ($(window).scrollTop() > reviewList.offset().top - 300) {

              if (reviewList.css('visibility') === 'hidden') {
                reviewList.css('visibility', 'visible')
                reviewList.find('.item').each(function () {
                  $(this).addClass('fade-animate')
                })
              }
            }
          }, 10)
        })
      }
    })

  })(window.Zepto)
</script>
@include('mobile.partial.video', [
  'finishTime' => '110',
  'videoOption' => [
    'm3u8' => 'https://1251352844.vod2.myqcloud.com/45f5686avodtransgzp1251352844/3b4dc3f34564972818953227732/v.f20.mp4',
    'autoplay' => false,
    'coverpic' => '',
    'width' => '640',
    'height' => '380',
    'live' => false,
    'systemFullscreen' => true
  ]
])
</body>
</html>

